<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取图片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body,
        html {
            height: 100%;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            padding: 15px;
        }

        .img {
            width: 100px;
            height: 100px;
            border: 0;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .text {
            padding: 0 15px;
            margin: 0;
            color:rgba(0,0,0,.85)
        }
    </style>
</head>

<body>
    <div class="container" id="container"></div>
    <p class="text">请打开控制台查看结果!</p>
    <script>
        const container = document.querySelector('#container');
        const createImages = (baseURL = 'https://www.eveningwater.com/my-web-projects/jQuery/7/img/', imageNames = 10,
            suffix = '.jpg') => {
            let result = ''
            for (let i = 0; i < imageNames; i++) {
                for(let j = 0;j < 2;j++){
                    result += `<img src='${baseURL + (i + 1) + suffix }' alt='${(i + 1)}' class='img'/>`
                }
            }
            return Promise.resolve(result)
        }
        const getImages = (el, includeDuplicates = false) => {
            const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src'));
            return includeDuplicates ? images : [...new Set(images)];
        }
        createImages().then(res => {
            container.innerHTML = res;
            console.log('不重复的',getImages(container));
            console.log('重复的',getImages(container,true));
        })
    </script>
</body>

</html>